<template>
	<view class="ur-page">
		<!-- 顶部搜索 -->
		<u-navbar 
			:is-back="false" 
			:is-fixed="true"
			:border-bottom="false"
			:background="background">
			<view class="ur-slot-wrap">
				<view class="ur-search-wrap">
					<u-search 
						v-model="search.keyword" 
						placeholder="请输入搜索内容"
						:animation="true"
						:focus="true"
						:clearabled="true"
						:show-action="false"
						>
					</u-search>
				</view>
			</view>
			<view class="ur-navbar-right" slot="right">
				<view class="ur-message-box ur-right-item" @click="onMessage">
					<u-icon name="more-circle"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="ur-page-tabs" v-if="pageTab.show">
			<u-tabs
				ref="tabs"
				:list="pageTab.list"
				:current="pageTab.index"
				:is-scroll="pageTab.scroll"
				:font-size="28"
				:bar-height="4"
				:bold="false"
				:active-color="'#ffffff'"
				:inactive-color="'#ffffff'"
				:bg-color="'#fa3534'"
				@change="onChangeTab"
				></u-tabs>
		</view>
		<scroll-view class="ur-content"
			:scroll-y="true"
			:scroll-top="0"
			>
			<view class="ur-body" v-if="!pageEmpty">
				<block v-if="pageTab.index === 0">
					<view class="ur-home-swiper-wrap">
						<view class="ur-home-background"></view>
						<view class="ur-home-swiper">
							<u-swiper 
								:list="banner" 
								:height="260" 
								:border-radius="20"
								@click="onSwiperClick">
							</u-swiper>
						</view>
					</view>
				</block>
				<block v-else>
					Tab-{{ pageTab.index }}
				</block>
			</view>
			<view class="ur-page-empty" v-if="pageEmpty">
				<u-empty mode="data"></u-empty>
			</view>
		</scroll-view>
		<u-toast ref="toast" />
		<!-- 无网络提示 -->
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fa3534'
				},
				search: {
					keyword: ''
				},
				pageEmpty: false,
				pageTab: {
					show: true,
					index: 0,
					scroll: true,
					list: [
						{
							"id": 0,
							"name": '首页' 
						},
						{
							"id": 1,
							"name": '数码' 
						},
						{
							"id": 2,
							"name": '手机' 
						},
						{
							"id": 3,
							"name": '家电' 
						},
						{
							"id": 4,
							"name": '电脑' 
						},
						{
							"id": 5,
							"name": '食品' 
						},
						{
							"id": 6,
							"name": '生鲜' 
						}
					]
				},
				banner: [
					{
						image: 'http://ygj-javashop.oss-cn-hangzhou.aliyuncs.com/test/normal/8D7B0EE517A34F63B3D2AF7835874072.png',
						title: '社保专家'
					},
					{
						image: 'http://ygj-javashop.oss-cn-hangzhou.aliyuncs.com/test/normal/695C15BB823A46709ABA458F3445A096.jpeg',
						title: '社保专家'
					}
				]
			}
		},
		onLoad() {
			let $this = this;
			console.log($this.$refs.tabs);
		},
		onPullDownRefresh() {
			let $this = this;
			console.log('开始下拉刷新');
			$this.init();
		},
		methods: {
			async init(){
				console.log('开始更新第‘'+ this.pageTab.index +'’个页面');
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 3000);
			},
			onMessage() {
				this.$refs.toast.show({
					title: '您点了右上角',
					type: 'success',
					position: 'top'
				});
			},
			onChangeTab(index) {
				this.pageTab.index = index;
				this.init();
			},
			onSwiperClick(index) {
				this.$refs.toast.show({
					title: '您点了Swiper:' + index,
					position: 'top'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ur-page {
		display: flex;
		flex-direction: column;
		height: calc(100vh - 50px);
	}
	.ur-slot-wrap {
		flex: 1;
		padding: 0 15rpx;
		.ur-search-wrap {
			margin: 0 10rpx;
		}
	}
	.ur-navbar-right {
		display: flex;
		color: #ffffff;
		padding-right: 25rpx;
		
		.ur-message-box {
			position: relative;
			display: flex;
			font-size: 36rpx;
			font-weight: 600;
			color: #ffffff;
		}
	}
	.ur-page-tabs {
		margin-top: -6rpx;
	}
	.ur-content {
		display: flex;
		flex-direction: column;
		
		.ur-body {
			padding: 10rpx 15rpx;
		}
	}
	.ur-home-swiper-wrap {
		display: flex;
		flex-direction: column;
		
		.ur-home-background {
			background-color: #fa3534;
			height: 130rpx;
			border-bottom-right-radius: 4em 0.5em;
			border-bottom-left-radius: 4em 0.5em;
			margin: -10rpx -15rpx;
		}
		
		.ur-home-swiper {
			margin: 0 15rpx;
			margin-top: -100rpx;
			box-shadow: 0px 20rpx 10rpx -10rpx #e4e7ed;
		}
	}
	.ur-page-empty {
		display: flex;
		flex-direction: column;
		height: calc(100vh - 144px);
	}
</style>
